<template>
  <div class="d-flex flex-column min-vh-100">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <RouterLink class="navbar-brand" to="/">Your Logo</RouterLink>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <RouterLink class="nav-link" to="/">首页</RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink class="nav-link" to="/about">关于</RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink class="nav-link" to="/todo">待办</RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink class="nav-link" to="/unabletotell">AI不敢说</RouterLink>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container mt-5 flex-grow-1">
      <RouterView />
    </div>
    <footer class="bg-light text-center py-3">
      &copy; 2023 Your Website Name
    </footer>
  </div>
</template>

<style>
  .min-vh-100 {
    min-height: 100vh;
  }

  .d-flex {
    display: flex;
    flex-direction: column;
  }

  .flex-grow-1 {
    flex-grow: 1;
  }
</style>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>
